<template>
  <q-card flat>
    <div v-for="menu in menuObj" :key="menu.name">
      <div v-if="menu.main.type === 'label'">
        <q-card-section class="flex items-center">
          <q-icon name="stars" size="sm" color="grey-7" class="q-mr-sm" />
          <span class="text-body1 text-bold text-grey-7">{{menu.main.caption}}</span>
        </q-card-section>
        <q-separator />
        <q-card-section>
          <q-btn
            class="my-btn"
            v-for="child in menu.children"
            :icon="child.icon"
            :label="child.caption"
            :key="child.name"
            :to="'/main/'+child.name"
            color="grey-9"
            stack
            flat
            size="lg"
          >
            <q-badge v-if="child.badge" color="red" floating>{{child.badge}}</q-badge>
          </q-btn>
        </q-card-section>
      </div>
      <div v-else>
        <q-btn
          class="my-btn"
          :icon="menu.main.icon"
          :label="menu.main.caption"
          :key="menu.main.name"
          :to="'/main/'+menu.main.name"
          color="grey-9"
          stack
          flat
          size="lg"
        >
          <q-badge v-if="menu.main.badge" color="red" floating>{{menu.main.badge}}</q-badge>
        </q-btn>
      </div>
    </div>
  </q-card>
</template>

<script>
import { defineComponent, ref } from 'vue';

export default defineComponent({
  props: {
    menu: {
      type: Array,
      default: () => []
    }
  },
  setup () {
  },
  computed: {
    menuObj () {
      const parentObj = {};

      for (const item of this.menu) {
        if (!item.parent) {
          parentObj[item.name] = {
            main: item,
            children: []
          };
        } else {
          parentObj[item.parent].children.push(item);
        }
      }
      return parentObj;
    }
  }
})
</script>

<style lang="scss">
.subtitle {
  font-size: 0.8rem;
  height: 21px;
}

.my-btn i {
  font-size: 3em!important;
}
.my-btn .q-btn__content div:first-of-type {
  font-size: 1rem;
}
</style>
